<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PartnersInCrime</title>
    <style type="text/css">
      *,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }

      /* Generic */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-color: #efe1db;
      }

      .main {
        position: relative;
        width: 60vw;
        height: 45vw;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        overflow: hidden;
      }

      /* Component */
      .lines {
        width: 100%;
        height: 100%;
        transform: rotateZ(10deg);
      }

      .line-a,
      .line-b,
      .line-c,
      .line-d {
        position: absolute;
        height: 0.175vw;
        border-radius: 50%;
        background-color: #fff6ef;
      }

      .line-a {
        width: 12vw;
        bottom: 20vw;
        left: 7vw;
        animation: line-a 0.15s infinite linear;
      }

      .line-b {
        width: 10vw;
        bottom: 18vw;
        left: 6vw;
        animation: line-b 0.2s infinite linear;
      }

      .line-c {
        width: 6vw;
        bottom: 12vw;
        left: 12vw;
        animation: line-c 0.1s infinite linear;
      }

      .line-d {
        width: 6vw;
        bottom: 26vw;
        left: 15vw;
        animation: line-d 0.135s infinite linear;
      }

      /**/
      .shadows {
        position: absolute;
        top: 13.5vw;
        left: 20.3vw;
        width: 27vw;
        height: 19vw;
        transform-origin: top left;
        transform: rotateZ(10deg);
        z-index: -5;
      }

      .shadow-a,
      .shadow-b,
      .shadow-c,
      .shadow-d {
        position: absolute;
        border-radius: 50%;
      }

      .shadow-a {
        bottom: -0.5vw;
        width: 150%;
        left: -25%;
        height: 1vw;
        background-color: rgba(109, 84, 80, 0.5);
        animation: shadow-a 0.15s infinite linear;
      }

      .shadow-b {
        bottom: -1.5vw;
        width: 100%;
        right: -25%;
        height: 0.45vw;
        background-color: rgba(109, 84, 80, 0.5);
        animation: shadow-b 0.175s infinite linear;
      }

      .shadow-c {
        bottom: -4vw;
        left: 100%;
        border-top: 2vw solid rgba(109, 84, 80, 0.5);
        border-right: 2vw solid rgba(109, 84, 80, 0.5);
        border-bottom: 2vw solid transparent;
        border-left: 2vw solid transparent;
        transform-origin: bottom left;
        transform: rotateZ(-45deg);
        opacity: 0;
        animation: shadow-c 0.45s infinite linear;
      }
      .shadow-c::before {
        content: "";
        position: absolute;
        left: 2vw;
        top: 2vw;
        border-top: 1vw solid rgba(109, 84, 80, 0.75);
        border-right: 1vw solid rgba(109, 84, 80, 0.75);
        border-bottom: 1vw solid transparent;
        border-left: 1vw solid transparent;
        border-radius: 50%;
      }

      .shadow-d {
        bottom: -2vw;
        left: 100%;
        border-top: 1.5vw solid rgba(109, 84, 80, 0.75);
        border-right: 1.5vw solid rgba(109, 84, 80, 0.75);
        border-bottom: 1.5vw solid transparent;
        border-left: 1.5vw solid transparent;
        transform-origin: bottom left;
        transform: rotateZ(-45deg);
        animation: shadow-c 1s infinite linear;
      }

      /**/
      .bicy {
        position: absolute;
        top: 13.5vw;
        left: 17.3vw;
        width: 27vw;
        height: 19vw;
        transform-origin: bottom left;
        transform: rotateZ(10deg);
        animation: bicy 0.15s infinite linear;
        /**/
        /**/
        /**/
      }
      .bicy__wheel-l,
      .bicy__wheel-r {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        width: 10.8vw;
        height: 10.8vw;
        border: 0.4vw solid #432316;
        border-radius: 50%;
        box-shadow: inset 0.3vw 0.3vw 0 #e9a589, inset -0.3vw -0.3vw 0 #fff6ef,
          inset -0.3vw 0.3vw 0 #e9a589, inset 0.3vw -0.3vw 0 #fff6ef;
      }
      .bicy__wheel-l::before,
      .bicy__wheel-l::after,
      .bicy__wheel-r::before,
      .bicy__wheel-r::after {
        content: "";
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 50%;
        border-top: 0.115vw solid #fff6ef;
        border-bottom: 0.115vw solid #fff6ef;
        border-left: 0.115vw solid transparent;
        border-right: 0.115vw solid transparent;
        animation: wheel 0.25s infinite linear;
      }
      .bicy__wheel-l::after,
      .bicy__wheel-r::after {
        width: 50%;
        height: 50%;
        border-top: 0.115vw solid transparent;
        animation: wheel 0.25s infinite linear;
      }
      .bicy__wheel-l {
        left: 0;
        z-index: -1;
      }
      .bicy__wheel-r {
        right: 0;
      }
      .bicy__fender {
        position: absolute;
        width: 115%;
        height: 125%;
        border-radius: 50%;
        border-top: 0.5vw solid #00665a;
      }
      .bicy__ac {
        position: absolute;
        width: 10.7vw;
        height: 3vw;
        bottom: 4vw;
        left: 4vw;
      }
      .bicy__ac::before {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 99%;
        height: 1.5vw;
        border: 0.3vw solid #3f3e3e;
        border-top: 0.3vw solid transparent;
        border-bottom-left-radius: 4vw;
        border-bottom-right-radius: 4vw;
      }
      .bicy__ac::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        border-left: 0.4vw solid #3f3e3e;
        border-bottom: 0.4vw solid #3f3e3e;
        z-index: -1;
      }
      .bicy__ac-top {
        position: absolute;
        width: 100%;
        height: 2vw;
        border-top-left-radius: 2vw;
        border-top-right-radius: 2vw;
        background-image: linear-gradient(
          -65deg,
          #009281 0,
          #009281 6vw,
          #fff6ef 6vw,
          #fff6ef 6.3vw,
          #009281 6.3vw,
          #009281 6.5vw,
          #fff6ef 6.5vw,
          #fff6ef 7.5vw,
          #009281 7.5vw,
          #009281 8vw,
          #fff6ef 8vw
        );
      }
      .bicy__ac-top::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2vw;
        border-top-left-radius: 2vw;
        border-top-right-radius: 1vw;
        background-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.1) 50%,
          transparent 50%
        );
      }
      .bicy__part-a,
      .bicy__part-b,
      .bicy__part-c {
        position: absolute;
        bottom: 5.8vw;
        left: 4.25vw;
        width: 0.7vw;
        height: 7.8vw;
        transform-origin: bottom left;
        transform: rotateZ(37deg);
        background-image: linear-gradient(
          to right,
          #fff6ef 0.25vw,
          #fedbc5 0.25vw
        );
      }
      .bicy__part-a {
        z-index: -1;
      }
      .bicy__part-b {
        left: 13vw;
        height: 8.2vw;
        background-image: linear-gradient(
          to right,
          #7adacc 0.25vw,
          #009281 0.25vw
        );
        z-index: -1;
      }
      .bicy__part-c {
        left: 13.2vw;
        bottom: 9vw;
        height: 6.4vw;
      }
      .bicy__part-c::before {
        content: "";
        position: absolute;
        width: 3vw;
        height: 0.7vw;
        bottom: 0;
        right: 0.1vw;
        transform-origin: bottom right;
        transform: rotateZ(-37deg);
        background-image: linear-gradient(
          to bottom,
          #fff6ef 0.25vw,
          #fedbc5 0.25vw
        );
      }
      .bicy__part-d {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 5.8vw;
        left: 12vw;
        width: 0.9vw;
        height: 9.5vw;
        transform-origin: bottom left;
        transform: rotateZ(-30deg);
        background-image: linear-gradient(
          to left,
          #fff6ef 0.4vw,
          #fedbc5 0.4vw
        );
        z-index: -1;
      }
      .bicy__part-d::before {
        content: "";
        position: absolute;
        top: -3.5vw;
        width: 0.5vw;
        height: 3.5vw;
        background-image: linear-gradient(
          to right,
          #a2a1a0 0.3vw,
          #d5d5d5 0.3vw
        );
      }
      .bicy__part-d::after {
        content: "";
        position: absolute;
        width: 3vw;
        height: 0.9vw;
        top: -4.7vw;
        border-radius: 1vw;
        transform-origin: bottom left;
        transform: rotateZ(30deg) skewX(-20deg);
        background-image: linear-gradient(to bottom, #009281, #00665a);
      }
      .bicy__part-e {
        position: absolute;
        width: 0.5vw;
        height: 7.2vw;
        right: 5.2vw;
        bottom: 5vw;
        transform-origin: bottom right;
        transform: rotateZ(8deg);
        background-image: linear-gradient(
          to right,
          #009281 0.25vw,
          #7adacc 0.25vw
        );
      }
      .bicy__part-f {
        display: flex;
        justify-content: center;
        position: absolute;
        width: 0.5vw;
        height: 9.2vw;
        right: 5.2vw;
        bottom: 5vw;
        transform-origin: bottom right;
        transform: rotateZ(-25deg);
        background-image: linear-gradient(
          to right,
          #009281 0.25vw,
          #7adacc 0.25vw
        );
      }
      .bicy__part-f::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1.5vw;
        top: -1.5vw;
        background-image: linear-gradient(
          to left,
          #fff6ef 0.25vw,
          #fedbc5 0.25vw
        );
      }
      .bicy__part-f::after {
        content: "";
        position: absolute;
        width: 80%;
        height: 1.9vw;
        top: -3.4vw;
        background-image: linear-gradient(
          to left,
          #d5d5d5 0.25vw,
          #a2a1a0 0.25vw
        );
      }
      .bicy__part-g {
        position: absolute;
        right: 10vw;
        bottom: 16.3vw;
        width: 1.75vw;
        height: 1.75vw;
        transform: rotateZ(25deg) skewY(10deg);
        border-top: 0.2vw solid #d5d5d5;
        border-right: 0.2vw solid #d5d5d5;
        box-shadow: inset -0.1vw 0.1vw 0 #a2a1a0;
      }
      .bicy__part-g::before {
        content: "";
        position: absolute;
        width: 2.5vw;
        height: 0.5vw;
        transform: rotateZ(-60deg) skewY(0deg) translateY(-1vw) translateX(-1vw);
        border-radius: 1.5vw;
        background-image: linear-gradient(to bottom, #009281, #00665a);
      }
      .bicy__basket {
        position: absolute;
        bottom: 12vw;
        right: 4vw;
        width: 3vw;
        height: 3.5vw;
        background-color: #b96c5c;
        border-top: 0.25vw solid #ebb6a1;
        box-shadow: inset 0 0.25vw 0 #883e30;
      }
      .bicy__basket-a {
        position: absolute;
        width: 125%;
        bottom: 0;
        border-bottom: 0.25vw solid #883e30;
        z-index: 5;
      }
      .bicy__basket-a::before {
        content: "";
        position: absolute;
        width: 2vw;
        height: 3vw;
        left: -0.5vw;
        top: -2.8vw;
        background-image: linear-gradient(
          70deg,
          #883e30 1.35vw,
          transparent 1.35vw
        );
      }
      .bicy__basket-a::after {
        content: "";
        position: absolute;
        width: 2vw;
        height: 2.8vw;
        right: 0.15vw;
        top: -2.75vw;
        background-image: linear-gradient(
          -70deg,
          #ebb6a1 1.35vw,
          transparent 1.35vw
        );
      }
      .bicy__basket::before {
        content: "";
        position: absolute;
        top: -0.25vw;
        left: -1.75vw;
        width: 1.75vw;
        height: 3.5vw;
        border-top: 0.25vw solid #ebb6a1;
        background-image: linear-gradient(70deg, transparent 1vw, #883e30 1vw);
      }
      .bicy__basket::after {
        content: "";
        position: absolute;
        top: -0.25vw;
        right: -1.75vw;
        width: 1.75vw;
        height: 3.5vw;
        border-top: 0.25vw solid #ebb6a1;
        box-shadow: inset 0 0.25vw 0 #883e30;
        background-image: linear-gradient(-70deg, transparent 1vw, #ebb6a1 1vw);
      }

      .human {
        position: absolute;
        top: 6.5vw;
        left: 25vw;
        width: 13.5vw;
        height: 24.5vw;
        transform-origin: top left;
        animation: human 0.15s infinite linear;
      }
      .human__c {
        animation: human-c 0.15s infinite alternate;
      }
      .human__head {
        position: absolute;
        right: -2vw;
        top: 2.2vw;
        width: 3.75vw;
        height: 4.5vw;
        transform: rotateZ(10deg);
        animation: human-head 6s infinite;
      }
      .human__neck {
        position: absolute;
        bottom: 0;
        width: 1.3vw;
        height: 1.9vw;
        background-image: linear-gradient(
          -10deg,
          transparent 0.2vw,
          #b35644 0.2vw,
          #b35644 0.3vw,
          #ffac90 0.6vw
        );
      }
      .human__face-a {
        position: absolute;
        bottom: 0.1vw;
        right: 0.5vw;
        width: 2.3vw;
        height: 2vw;
        transform: rotateZ(5deg);
        border-bottom-right-radius: 0.5vw;
        background-image: linear-gradient(
          to top,
          #b35644,
          #b35644 0.1vw,
          #ffac90 0.4vw
        );
      }
      .human__face-b {
        position: absolute;
        top: 0.6vw;
        right: 0.7vw;
        width: 2.4vw;
        height: 2.2vw;
        transform: rotateZ(-20deg);
        overflow: hidden;
        background-color: #ffac90;
      }
      .human__face-b::before {
        content: "";
        position: absolute;
        bottom: 20%;
        right: 40%;
        width: 3.2vw;
        height: 3.2vw;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #d45029, #8c1d0b);
        border-bottom: 0.25vw solid #8c1d0b;
      }
      .human__nose {
        position: absolute;
        right: 0.25vw;
        bottom: 35%;
        width: 0.9vw;
        height: 0.9vw;
        transform: rotateZ(-40deg);
        background-color: #ffac90;
        border-bottom: 0.1vw solid #b35644;
        z-index: -1;
      }
      .human__hair {
        position: absolute;
        left: 0.35vw;
        top: 0.4vw;
        width: 3.2vw;
        height: 1.1vw;
        transform: rotateZ(-25deg);
        overflow: hidden;
        animation: human-hair 0.1s infinite linear alternate;
      }
      .human__hair::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 3.2vw;
        height: 3.2vw;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #d45029 60%, #8c1d0b);
        border-bottom: 0.25vw solid #8c1d0b;
      }
      .human__ear {
        position: absolute;
        top: 1.8vw;
        left: 1.2vw;
        width: 0.8vw;
        height: 1vw;
        border-radius: 50%;
        transform: rotateZ(-15deg);
        background-color: #ffac90;
      }
      .human__cheek {
        position: absolute;
        top: 2.3vw;
        left: 2.2vw;
        width: 0.8vw;
        height: 0.6vw;
        border-radius: 50%;
        transform: rotateZ(-15deg);
        background-color: rgba(212, 80, 41, 0.35);
        filter: blur(2px);
      }
      .human__mouth {
        position: absolute;
        right: 0.4vw;
        bottom: 20%;
        width: 0.8vw;
        height: 0.5vw;
        transform: rotateZ(5deg);
        overflow: hidden;
      }
      .human__mouth::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 2.5vw;
        height: 1vw;
        border-radius: 50%;
        border-bottom: 0.2vw solid #efe1db;
      }
      .human__eye {
        position: absolute;
        top: 1.9vw;
        right: 0.65vw;
        width: 0.55vw;
        height: 0.15vw;
        background-color: #101010;
        border-radius: 50%;
        transform: rotateZ(-35deg);
        animation: human-eye 6s infinite;
      }
      .human__eye::before {
        content: "";
        position: absolute;
        width: 130%;
        height: 0.19vw;
        right: -0.31vw;
        top: -0.4vw;
        background-color: #101010;
        transform: skewX(-30deg);
      }
      .human__backpack {
        position: absolute;
        top: 5.2vw;
        left: 2.5vw;
        width: 6.5vw;
        height: 1.35vw;
        transform-origin: top left;
        transform: rotateZ(-20deg);
        border-top-right-radius: 3vw;
        border-bottom-left-radius: 0.5vw;
        border-bottom-right-radius: 0.5vw;
        background-image: linear-gradient(to bottom, #883e30, #3d1c15);
      }
      .human__backpack::before {
        content: "";
        position: absolute;
        top: -0.5vw;
        width: 2.5vw;
        height: 0.5vw;
        border-top-right-radius: 2vw;
        border-top-left-radius: 0.5vw;
        background-image: linear-gradient(
          to right,
          #622d23 30%,
          #009281 30%,
          #009281 40%,
          #883e30 40%,
          #883e30 50%,
          #009281 50%
        );
      }
      .human__backpack::after {
        content: "";
        position: absolute;
        top: 30%;
        width: 93%;
        height: 0.2vw;
        background-color: #b96c5c;
      }
      .human__chest {
        position: absolute;
        top: 7.2vw;
        left: 1vw;
        width: 10vw;
        height: 3.2vw;
        transform-origin: top left;
        transform: rotateZ(-20deg);
        border-top-right-radius: 2vw;
        border-bottom-right-radius: 1vw;
        background-image: linear-gradient(to bottom, #fff6ef 2vw, #fedbc5);
      }
      .human__chest::before {
        content: "";
        position: absolute;
        top: -0.4vw;
        right: -2vw;
        width: 4vw;
        height: 3vw;
        transform-origin: top left;
        transform: rotateZ(30deg);
        background-image: linear-gradient(
          -35deg,
          transparent 1vw,
          #fedbc5 1vw,
          #fff6ef 2vw
        );
      }
      .human__chest::after {
        content: "";
        position: absolute;
        top: -0.5vw;
        right: -0.5vw;
        width: 7vw;
        height: 3.5vw;
        border-top-left-radius: 1vw;
        border-top-right-radius: 5vw;
        border-bottom-left-radius: 4vw;
        border-bottom-right-radius: 3vw;
        border: 0.4vw solid #622d23;
      }
      .human__arm-l {
        position: absolute;
        top: 5.45vw;
        left: 5.5vw;
        width: 5.5vw;
        height: 2vw;
        border-radius: 2vw;
        transform: rotateZ(-25deg);
        background-image: linear-gradient(to bottom, #ffac90 80%, #b35644 90%);
      }
      .human__arm-l::before {
        content: "";
        position: absolute;
        right: 0;
        width: 55%;
        height: 100%;
        border-top-right-radius: 2vw;
        border-bottom-right-radius: 2vw;
        background-image: linear-gradient(to bottom, #fff6ef 70%, #fedbc5 90%);
        border-left: 0.25vw solid #b35644;
      }
      .human__arm-l-a {
        position: absolute;
        bottom: -3.5vw;
        left: -0.02vw;
        width: 1.5vw;
        height: 4.5vw;
        transform-origin: top left;
        transform: rotateZ(-25deg);
        background-image: linear-gradient(
          100deg,
          #ffac90 1.55vw,
          transparent 1.55vw
        );
      }
      .human__arm-l-a::before {
        content: "";
        position: absolute;
        bottom: -1.75vw;
        left: -0.125vw;
        width: 1vw;
        height: 2vw;
        border-top-left-radius: 1.5vw;
        border-top-right-radius: 1.5vw;
        border-bottom-left-radius: 2vw;
        border-bottom-right-radius: 4vw;
        background-color: #ffac90;
      }
      .human__arm-r {
        position: absolute;
        top: 5.45vw;
        left: 6vw;
        width: 5.5vw;
        height: 2vw;
        border-radius: 2vw;
        transform: rotateZ(-25deg);
        background-image: linear-gradient(to bottom, #ffac90 80%, #b35644 90%);
        z-index: -5;
      }
      .human__arm-r::before {
        content: "";
        position: absolute;
        right: 0;
        width: 55%;
        height: 100%;
        border-top-right-radius: 2vw;
        border-bottom-right-radius: 2vw;
        background-color: #fff6ef;
        border-left: 0.25vw solid #b35644;
      }
      .human__arm-r-a {
        position: absolute;
        bottom: -3.5vw;
        left: -0.02vw;
        width: 1.5vw;
        height: 4.5vw;
        transform-origin: top left;
        transform: rotateZ(-25deg);
        background-image: linear-gradient(
          100deg,
          #b35644 1.55vw,
          transparent 1.55vw
        );
      }
      .human__arm-r-a::before {
        content: "";
        position: absolute;
        bottom: -1.75vw;
        left: -0.125vw;
        width: 1vw;
        height: 2vw;
        border-top-left-radius: 1.5vw;
        border-top-right-radius: 1.5vw;
        border-bottom-left-radius: 2vw;
        border-bottom-right-radius: 4vw;
        background-color: #b35644;
      }
      .human__leg-l {
        position: absolute;
        top: 8vw;
        width: 2.5vw;
        height: 10vw;
        transform-origin: top left;
        transform: rotateZ(-35deg);
        border-top-left-radius: 1vw;
        border-top-right-radius: 1vw;
        background-image: linear-gradient(
          -82deg,
          transparent 0.775vw,
          #3f3e3e 0.775vw,
          #3f3e3e 1.75vw,
          #101010 1.75vw
        );
        animation: human-legg 0.15s infinite alternate;
      }
      .human__leg-l-a {
        position: absolute;
        bottom: -5.25vw;
        right: 0.5vw;
        height: 6.5vw;
        width: 2.5vw;
        transform-origin: top left;
        transform: rotateZ(30deg);
        border-top-left-radius: 2vw;
        background-image: linear-gradient(
          82deg,
          transparent 1.1vw,
          #101010 1.1vw,
          #101010 2.3vw,
          #3f3e3e 2.3vw
        );
      }
      .human__leg-l-a::before {
        content: "";
        position: absolute;
        bottom: -1.25vw;
        right: 0.1vw;
        width: 0.75vw;
        height: 1.25vw;
        background-image: linear-gradient(
          to bottom,
          #b35644 0.25vw,
          #ffac90 0.25vw
        );
      }
      .human__leg-l-a::after {
        content: "";
        position: absolute;
        bottom: -3.5vw;
        left: 1.2vw;
        width: 4vw;
        height: 1.5vw;
        border-left: 4vw solid #101010;
        border-top: 1vw solid transparent;
        border-bottom: 1vw solid transparent;
        border-right: 1vw solid transparent;
        border-radius: 1vw;
        transform: rotateZ(20deg);
      }
      .human__leg-l-b {
        position: absolute;
        bottom: -8.75vw;
        right: 3.9vw;
        height: 0.5vw;
        width: 2.5vw;
        transform: rotateZ(35deg);
        background-image: linear-gradient(to bottom, #009281, #00665a);
      }
      .human__leg-r {
        position: absolute;
        top: 9vw;
        left: 0.5vw;
        width: 2.5vw;
        height: 10vw;
        transform-origin: top left;
        transform: rotateZ(-70deg);
        border-top-left-radius: 1vw;
        border-top-right-radius: 1vw;
        background-image: linear-gradient(
          -82deg,
          transparent 0.775vw,
          #101010 0.775vw
        );
        z-index: -5;
      }
      .human__leg-r-a {
        position: absolute;
        bottom: -4vw;
        right: 0.5vw;
        height: 6.5vw;
        width: 2.5vw;
        transform-origin: top left;
        transform: rotateZ(95deg) translateY(-2.2vw);
        border-top-left-radius: 2vw;
        background-image: linear-gradient(
          82deg,
          transparent 1.1vw,
          #101010 1.1vw
        );
      }
      .human__leg-r-a::before {
        content: "";
        position: absolute;
        bottom: -1.25vw;
        right: 0.1vw;
        width: 0.75vw;
        height: 1.25vw;
        background-image: linear-gradient(
          to bottom,
          #8e4436 0.25vw,
          #b35644 0.25vw
        );
      }
      .human__leg-r-a::after {
        content: "";
        position: absolute;
        bottom: -3.5vw;
        left: 1.2vw;
        width: 4vw;
        height: 1.5vw;
        border-left: 4vw solid #101010;
        border-top: 1vw solid transparent;
        border-bottom: 1vw solid transparent;
        border-right: 1vw solid transparent;
        border-radius: 1vw;
        transform: rotateZ(20deg);
      }

      .dog {
        position: absolute;
        bottom: 14.75vw;
        right: 3vw;
        width: 5.2vw;
        height: 4.5vw;
        animation: dog 0.075s infinite linear alternate;
      }
      .dog__head {
        position: absolute;
        left: 2vw;
        top: 0.675vw;
        width: 2vw;
        height: 2.25vw;
        border-radius: 1.5vw;
        background-color: #fff6ef;
      }
      .dog__head::after {
        content: "";
        position: absolute;
        top: 0.5vw;
        right: 0.4vw;
        width: 0.6vw;
        height: 0.125vw;
        border-radius: 50%;
        background-color: #101010;
        transform: rotateZ(-30deg);
      }
      .dog__body {
        position: absolute;
        bottom: 0;
        left: 1.75vw;
        width: 2.5vw;
        height: 3vw;
        transition: bottom left;
        transform: rotateZ(15deg);
        background-image: linear-gradient(
          70deg,
          #fff6ef 2.5vw,
          transparent 2.5vw
        );
        overflow: hidden;
      }
      .dog__body::before {
        content: "";
        position: absolute;
        right: 60%;
        bottom: 0;
        width: 2vw;
        height: 2vw;
        border-radius: 50%;
        background-image: linear-gradient(to right, #d45029, #8c1d0b);
      }
      .dog__mouth-a {
        position: absolute;
        top: 1vw;
        right: 0;
        width: 2vw;
        height: 1vw;
        transform: rotateZ(-15deg);
        border-bottom-right-radius: 1vw;
        background-color: #fff6ef;
        z-index: -1;
      }
      .dog__mouth-a::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0.4vw;
        height: 0.3vw;
        border-radius: 1vw;
        background-color: #101010;
      }
      .dog__mouth-b {
        position: absolute;
        top: 2.5vw;
        right: 0.2vw;
        width: 1.5vw;
        height: 0.5vw;
        transform: rotateZ(-15deg);
        border-bottom-right-radius: 1vw;
        background-color: #fff6ef;
      }
      .dog__ear {
        position: absolute;
        top: 1.35vw;
        width: 2.25vw;
        height: 1.45vw;
        transform: rotateZ(-15deg);
        border-top-left-radius: 0.25vw;
        border-bottom-left-radius: 0.75vw;
        background-image: linear-gradient(
          -10deg,
          transparent 0.25vw,
          #fff6ef 0.25vw
        );
        overflow: hidden;
        animation: dog-ear 0.075s infinite linear alternate;
      }
      .dog__ear::before {
        content: "";
        position: absolute;
        bottom: 60%;
        width: 1.5vw;
        height: 1.5vw;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #d45029, #8c1d0b);
      }
      .dog__ear::after {
        content: "";
        position: absolute;
        bottom: 80%;
        right: 0;
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #d45029, #8c1d0b);
      }
      .dog__tongue {
        position: absolute;
        top: 2vw;
        right: 1vw;
        width: 0.5vw;
        height: 1.25vw;
        background-image: linear-gradient(to top, #d45029, #8c1d0b);
        transform: rotateZ(25deg);
        border-top-left-radius: 2vw;
        border-top-right-radius: 3vw;
        border-bottom-left-radius: 1.5vw;
        border-bottom-right-radius: 3vw;
        animation: dog-tongue 0.075s infinite linear alternate;
      }

      .heart {
        position: absolute;
        width: 1vw;
        height: 1vw;
        right: 7vw;
        background-color: #d02323;
        transform: rotateZ(-50deg);
        animation: heart 6s infinite linear, heart-opacity 6s infinite linear;
      }
      .heart::before,
      .heart::after {
        content: "";
        position: absolute;
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
        background-color: #d02323;
      }
      .heart::before {
        bottom: 50%;
      }
      .heart::after {
        left: 50%;
      }

      /***********/
      /***********/
      @keyframes bicy {
        0%,
        100% {
          top: 13.5vw;
          transform: rotateZ(10deg) scaleY(1);
        }
        20% {
          top: 13.65vw;
          transform: rotateZ(10deg) scaleY(0.998);
        }
        40% {
          top: 13.55vw;
          transform: rotateZ(10deg) scaleY(0.9975);
        }
        60% {
          top: 13.5vw;
          transform: rotateZ(10deg) scaleY(0.998);
        }
        80% {
          top: 13.6vw;
          transform: rotateZ(10deg scaleY(1));
        }
      }
      @keyframes human {
        0%,
        100% {
          top: 6.5vw;
          left: 25vw;
        }
        20% {
          top: 6.6vw;
          left: 25vw;
        }
        40% {
          top: 6.55vw;
          left: 25vw;
        }
        60% {
          top: 6.45vw;
          left: 25vw;
        }
        80% {
          top: 6.6vw;
          left: 25vw;
        }
      }
      @keyframes human-head {
        0%,
        70%,
        100% {
          transform-origin: bottom left;
          transform: rotateZ(0);
        }
        80%,
        95% {
          transform-origin: bottom left;
          transform: rotateZ(10deg);
        }
      }
      @keyframes human-eye {
        0%,
        65%,
        100% {
          height: 0.15vw;
          top: 1.9vw;
          transform: rotateZ(-35deg);
        }
        75%,
        95% {
          height: 0.2vw;
          top: 2vw;
          transform: rotateZ(-20deg);
        }
      }
      @keyframes heart {
        0%,
        75% {
          transform: translateY(0) rotateZ(-50deg) scaleZ(0);
        }
        85%,
        95% {
          transform: translateY(-2.5vw) rotateZ(-50deg) scaleZ(1);
        }
        100% {
          transform: translateY(-6vw) rotateZ(-50deg) scaleZ(0);
        }
      }
      @keyframes heart-opacity {
        0%,
        75% {
          opacity: 0;
        }
        85%,
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes human-hair {
        to {
          transform: rotateZ(-35deg);
        }
      }
      @keyframes human-c {
        to {
          transform-origin: bottom left;
          transform: rotateZ(-0.75deg);
        }
      }
      @keyframes human-leg {
        to {
          transform: translateY(-0.1vw) rotateZ(-35deg);
        }
      }
      @keyframes wheel {
        to {
          transform: rotateZ(1turn);
        }
      }
      @keyframes line-a {
        to {
          width: 10.8vw;
          bottom: 19.85vw;
          left: 0vw;
        }
      }
      @keyframes line-b {
        to {
          width: 6.9vw;
          bottom: 17.9vw;
          left: 1vw;
        }
      }
      @keyframes line-c {
        to {
          width: 3.9vw;
          bottom: 12vw;
          left: 0vw;
        }
      }
      @keyframes line-d {
        to {
          width: 3vw;
          bottom: 25.95vw;
          left: 1vw;
        }
      }
      @keyframes shadow-a {
        to {
          height: 0.9vw;
          width: 148%;
        }
      }
      @keyframes shadow-b {
        to {
          height: 0.425vw;
          width: 95%;
        }
      }
      @keyframes shadow-c {
        0% {
          left: 100%;
          opacity: 0;
        }
        50% {
          left: 50%;
          opacity: 1;
        }
        100% {
          left: 0%;
          opacity: 0;
        }
      }
      @keyframes dog {
        to {
          right: 3.1vw;
          bottom: 14.7vw;
        }
      }
      @keyframes dog-ear {
        to {
          transform-origin: top left;
          top: 1.3vw;
          transform: rotateZ(-10deg);
        }
      }
      @keyframes dog-tongue {
        to {
          transform: rotateZ(45deg);
          height: 1.2vw;
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="lines">
        <div class="line-a"></div>
        <div class="line-b"></div>
        <div class="line-c"></div>
        <div class="line-d"></div>
      </div>
      <div class="bicy">
        <div class="heart"></div>
        <div class="dog">
          <div class="dog__ear"></div>
          <div class="dog__head"></div>
          <div class="dog__body"></div>
          <div class="dog__mouth-a"></div>
          <div class="dog__mouth-b"></div>
          <div class="dog__tongue"></div>
        </div>
        <div class="bicy__wheel-l">
          <div class="bicy__fender"></div>
        </div>
        <div class="bicy__wheel-r">
          <div class="bicy__fender"></div>
        </div>
        <div class="bicy__ac">
          <div class="bicy__ac-top"></div>
        </div>
        <div class="bicy__parts">
          <div class="bicy__part-a"></div>
          <div class="bicy__part-b"></div>
          <div class="bicy__part-c"></div>
          <div class="bicy__part-d"></div>
          <div class="bicy__part-e"></div>
          <div class="bicy__part-f"></div>
          <div class="bicy__part-g"></div>
        </div>
        <div class="bicy__basket">
          <div class="bicy__basket-a"></div>
        </div>
      </div>
      <div class="shadows">
        <div class="shadow-a"></div>
        <div class="shadow-b"></div>
        <div class="shadow-c"></div>
        <div class="shadow-d"></div>
      </div>
      <div class="human">
        <div class="human__c">
          <div class="human__head">
            <div class="human__neck"></div>
            <div class="human__face-a"></div>
            <div class="human__face-b"></div>
            <div class="human__nose"></div>
            <div class="human__hair"></div>
            <div class="human__cheek"></div>
            <div class="human__ear"></div>
            <div class="human__mouth"></div>
            <div class="human__eye"></div>
          </div>
          <div class="human__chest"></div>
          <div class="human__backpack"></div>
        </div>
        <div class="human__arm-r">
          <div class="human__arm-r-a"></div>
        </div>
        <div class="human__arm-l">
          <div class="human__arm-l-a"></div>
        </div>
        <div class="human__leg-r">
          <div class="human__leg-r-a"></div>
        </div>
        <div class="human__leg-l">
          <div class="human__leg-l-a"></div>
          <div class="human__leg-l-b"></div>
        </div>
      </div>
    </div>
  </body>
</html>
